<template>
	<view class="page">
		<hx-navbar title="课程价格" :fixed="true" bar-placeholder="hidden" transparent="auto"
			:background-color="[127, 74, 255,1]" color="#ffffff" @bindBack="bindBack"
			:pageScroll.sync="scrollData"/>
			<view class="information-bg" :style="{'padding-top':statusBarHeight+16+'px'}">
				<view class="content" v-show="statusBarHeight!=''">
					<!-- 基础信息 -->
					<view class="basic">
						<!-- 课次时长 -->
						<view class="language-level-box b-b-ededed">
							<view class="title navy_blue f_32 f_semibold">课次时长</view>
							<view class="f_26 gery1 m_b_32">请选择每节课时的时长</view>
							<view class=" dis-flex flex-x-between item-box">
								<view v-for="(level_item,level_index) in durationList" :key="level_index" :class="durationListIndex==level_index?'active f_semibold':'acquiescence'"
								class="item b-b-ededed" @click="durationListWay(level_index)">
									<text class="f_26">{{level_item}}小时/课次</text>
									<image v-if="durationListIndex==level_index" :src="imgPrefix('/static/image/teacher/check.png')" mode=""></image>
								</view>
							</view>
							<view class="price-box">
								<view class="f_32 f_semibold navy_blue">课时金额</view>
								<view class="f_26 gery1 m-t-10">请填写每节课时的金额</view>
								<input class=" f_48 ff6f03  f_semibold" type="number" v-model="price" placeholder="请填写金额" placeholder-class="gery1 f_48"/>
							</view>
						</view>
						
					</view>
					<view class="btn-box">
						<view class="btn t-c" @tap.stop="navigateBack" :class="durationListIndex!=-1&&price!=''?'btn_active':'btn_default'">
							确认
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
import { statusBarHeight } from '@/static/mixins/statusBarHeight.js';
	import zanPopup from '@/components/popup/index.vue';
	export default {
		components: {
			zanPopup
		},
		mixins: [statusBarHeight],
		data() {
			return {
				pageshow:false,
				id:'',
				scrollData:{},
				durationListIndex:-1,//语言水平选中下标
				durationList:['1','2','3'],//语言水平列表
				price:'',//请填写每节课次的金额
			};
		},
		onLoad(option){
			if(option.hasOwnProperty('coursePrice')){
				let obj = JSON.parse(decodeURIComponent(option.coursePrice))
				this.price = obj.price;
				this.durationListIndex = this.durationList.findIndex(o=>Number(o)==obj.hour)
			}
		},
		methods:{
			//语言水平tag切换
			durationListWay (index){
				this.durationListIndex=index 
			},
			bindBack(){
				uni.showModal({
				    title: '退出提醒',
				    content: '课程价格填写未保存，是否退出',
				    success: function (res) {
				        if (res.confirm) {
							uni.navigateBack()
				        }
				    }
				});
			},
			navigateBack(){
				let {durationList,durationListIndex,price}=this;
				if(durationListIndex==-1){
					this.showToast('请选择课次时长')
				}else if(Number(price)<=0){
					this.showToast('请填写正确的金额')
				}else{
					let obj = {
						hour:Number(durationList[durationListIndex]),
						price:price
					}
					uni.$emit("setObj",{type:2,objList: obj});
					uni.navigateBack();
				}
			}
		},
		
		onPageScroll(e) {
			this.scrollData = e
		}
	}
</script>

<style lang="scss" scoped>
.b-b-ededed{
	border-bottom: 1px solid #ededed;
}
.ff6f03{
	color: #ff6f03;
}
.page{
	padding-bottom: 148rpx;
	.information-bg{
		background-image: linear-gradient(313deg, 
			#693ae6 0%, 
			#9564e6 100%);
			height: 126rpx;
			position: relative;
			padding-bottom: 95rpx;
	}
	.content{
		width: 654rpx;
		position: absolute;
		border-bottom: 16rpx solid #f4f4f4;	
		margin: 0 48rpx;
		// 基础信息
		.basic{
			padding: 0 32rpx 32rpx 32rpx;
			box-shadow: 0rpx 0rpx 40rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 32rpx;
			background-color: #ffffff;
			.b-title{
				padding: 32rpx 0 26rpx 0;
			}
			.m_b_32{
				margin-bottom: 32rpx;
			}
			.language-level-box{
				.item-box{
					flex-wrap:wrap;
				}
				.item{
					width: 30%;
					margin-bottom: 32rpx;
					// padding: 12rpx 0;
					line-height: 64rpx;
					text-align: center;
					color: rgba(37, 39, 72, 0.3);
				}
				.active{
					background-color: rgba(127, 74, 255, 0.1);
					border-radius: 12rpx;
					border: solid 1rpx #9254ff;
					position: relative;
					image{
						position: absolute;
						right: 0;
						bottom: 0;
						width: 36rpx;
						height: 36rpx;
					}
					text{
						color: #9254ff;
					}
				}
				.title{
					padding: 34rpx 0 18rpx 0;
				}
				.acquiescence{
					background-color: #ffffff;
					border-radius: 12rpx;
					border: solid 1rpx rgba(37, 39, 72, 0.3);
				}
			}
			.price-box input{
				height: 116rpx;
			}
		}
		.m-t-10{
			margin-top: 10rpx;
		}
		.btn-box{
			width: 100%;
			margin-top: 40rpx;
			.btn{
				padding: 0 48rpx;
				border-radius: 16rpx;
				line-height: 92rpx;
				color: white;
			}
			.btn_active{
				background-image: linear-gradient(270deg, 
					#7f4aff 0%, 
					#9254ff 100%);
			}
			.btn_default{
				background-color: #f0f0f6;
				color: #d1d2db;
			}
		}
	}
}

//授课语种弹出层
.commonPopup{
	width: 750rpx;
	background-color:white;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	.title{
		padding: 26rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
		position: relative;
		image{
			position: absolute;
			right: 48rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.item{
		height: 100rpx;
		padding: 0 48rpx;
		border-bottom: 1rpx solid #f8f8f8;
		image{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.cancel{
		line-height: 112rpx;
		border-top: 16rpx solid #f4f4f4;
	}
}
// 地址弹出层样式
.popup{
		max-height: 862rpx;
		width: 750rpx;
		background: white;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		color: #252748;
		.p-head{
			height: 92rpx;
				image{
					position: relative;
					right: 48rpx;
					width: 32rpx;
					height: 32rpx;
				}
		}
		.btnbox{
			background-color: white;
			position: fixed;
			width: 750rpx;
			bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.btn{
				height: 92rpx;
				background-color: #f0f0f6;
				border-radius: 24rpx;
				margin: 48rpx;
				color: #252748;
			}
		}
		.addressList-box{
			padding-bottom: 188rpx;
			
			padding-left:48rpx ;
			max-height: 770rpx;
			overflow-y: scroll;
			.status{
				margin-right: 16rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			.info{
				border-bottom: 1px solid #ededed;
				padding: 32rpx 48rpx 32rpx 0;
				.detail{
					width: 600rpx;
					color: #252748;
					margin-bottom: 20rpx;
					text{
						margin-right: 10rpx;
					}
				}
				.f-c{
					color: #8f8f9a;
				}
			}
		}
	}
	.f-c-1cbc7b{
		color: #1cbc7b;
	}
	.f-c-fb4e44{
		color: #fb4e44;
	}
</style>
